<template>
  <div>
    <router-link to="/">返回首页</router-link>
    <router-link to="/father">查看父组件</router-link>
    <router-link to="/big" active-class="class666">查看大组件</router-link>
    <p>我是父组件</p>
    <h1>父组件中的num：{{num}}</h1>
    <button @click="num ++">+1</button>
    <v-small
      :info1="num"
      info2="666"
      :info3="msg"
      :info5="{age: 18, name: 'Tom'}"
      @inputson="getDateFromSon"
    ></v-small>
      <!-- @click.native="showWord" -->
    <!-- native修饰符，说明是原生事件 -->
    <p>1. 父传子：父组件将自己的数据传给子组件。第一步赋值，在子组件的标签上，通过属性赋值;第二步在子组件内通过props接受</p>
    <p>父传子中props的验证：props不再是字符串数组，而是一个对象</p>
    <p>单向数据流：只能是父组件单向下行的传给子组件。子组件不可以修改父组件传过来的值,只能用不能改。如果需要修改，可以通过data以及computed修改</p>
    <span>使用v-model：<input type="text" :value="fatherVal"></span>
  </div>
</template>

<script>
import vSmall from './small'
export default {
  methods: {
    getDateFromSon(val1) {
      // console.log(val1);
      this.fatherVal = val1
    },
    showWord() {
      alert('搞晕了....')
    }
  },
  data() {
    return {
      msg: '我是来自父组件的数据',
      num: 1,
      fatherVal: ''
    }
  },
  mounted() {
    document.title = this.$route.meta.title;
  },
  components: {
    vSmall
  },
}
</script>

<style>
.router-link-exact-active {
  color: red;
}
</style>